<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Read to my child - Title of the story</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
	<div id="top">
    	<div id="cloud"></div>
        <div id="sun"></div>
    </div>
    
    <div id="navigation">
    	<div id="about" class="fade"><a href="about.html"></a></div>
        <div id="story" class="fade"><a href="stories.html"></a></div>
        <div id="home"><a href="home.html"></a></div>
        <div id="request" class="fade"><a href="request.html"></a></div>
        <div id="contact" class="fade"><a href="contact.html"></a></div>
        <div class="clear"></div>
    </div>
	
    <div id="container" class="round-corner story-detail-pad">

        <div id="video-panel">
        	<div id="video-title">
        		<div class="title">Where is the Green Sheep?</div>
                <div class="likefb"><a href=""><img src="img/like-fb.png" /></a></div>
                <div class="video-pani">
                	<a href="" class="video-pani-previous"></a>
                    <a href="" class="video-pani-next"></a>
                </div>
                <div class="clear"></div>
        	</div>
            <div id="video-info">
        		<div id="video-screen">
                	<iframe width="640" height="390" src="http://www.youtube.com/embed/fqG5NP1xm-o" frameborder="0" allowfullscreen></iframe>
                </div>
                <div id="video-detail">
                	<div class="title">Author</div>
                    <div class="author">Mem Fox & Judy Horacek</div>
                    <div class="title">Released date</div>
                    <div class="text"><p>15th Oct 2011</p></div>
                    <div class="title">SHORT DESCRIPTION: </div>
                    <div class="text"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dapibus vulputate adipiscing. Nunc lacus mauris, placerat eget aliquam vel, tincidunt in mi.</p></div>
                    
                    <div class="share">
                    	<div class="fbshare"><a href=""><img src="img/fbshare.png" /></a></div>
                        <div class="twittershare"><a href=""><img src="img/twittershare.png" /></a></div>
                    </div>
                    <div><a class="record-button" href=""></a></div>
                </div>
                <div class="clear"></div>
        	</div>
        </div>
        
        <div id="related-video">
        	<div id="related-video-title">
            	<div class="title">Related Stories</div>
                <div class="view-more"><a href="stories.html">View all >></a></div>
                <div class="clear"></div>
            </div>

            <div id="video-line">
                <div class="video"><a href="story-detail.html"><img src="cover/vid-1.jpg" /></a></div>
                <div class="video video-center"><a href="story-detail.html"><img src="cover/vid-2.jpg" /></a></div>
                <div class="video"><a href="story-detail.html"><img src="cover/vid-1.jpg" /></a></div>
            </div>
            
            <div class="clear"></div>
        </div>
        
	</div>
    
    <div id="footer-story-detail">
    	<div class="footer-line">
        	<div id="network" class="left">// Meet us on: 
            	<a class="facebook" href="" target="_blank"></a>
                <a class="twitter" href="" target="_blank"></a>
                <a class="youtube" href="" target="_blank"></a></div>
            <div id="subscribes" class="left"><form>// Subscribes: <input class="text" type="text" /> <a class="subscribe-button" href=""></a></form></div>
            <div class="clear"></div>
        </div>
        <div class="footer-line">
        	<div id="copyright" class="left">// Copyright © 2012 <a href="index.html">Read To My Child</a>. All Rights Reserved.</div>
            <div id="designby" class="left">// Designed by <a href="http://www.behance.net/squalldesign" target="_blank">Squall Le</a>.</div>
            <div class="clear"></div>
        </div>
    </div>
    
    <div id="bottom-grass">
    	<div id="chesnut"></div>
        <div id="grass"></div>
        <div id="monkey"></div>
    </div>
</body>
</html>
